import { useEffect,useState } from "react";
import store from '../../store/index'
import actionCreator from '../../store/actions/counter';

let num = store.getState()

const Counter = () => {
    // // 配置代理
    // useEffect(()=>{
    //     fetch('api/data/index.json')
    //     .then(body=>body.json())
    //     .then(res=>{
    //         console.log(res);
    //     })
    //     return () => {

    //     }
    // })

    let [count,setCount] = useState(num)

    // 减少
    let decrement = () => {
         // 派发action，变更state
        // store.dispatch(actionCreator('INCREASE_COUNT',-10))
        store.dispatch(actionCreator('DECREASE_COUNT',10))
        
    }

    // 增加
    let increment = () => {
        // 派发action，变更state
        store.dispatch(actionCreator('INCREASE_COUNT',5))
    }

    // 订阅store的变化
    // store.subscribe(()=>{
    //     // console.log(store.getState());
    //     setCount(store.getState())
    // })

    return(
        <fieldset>
            <legend>计数器</legend>
            <button onClick={decrement}>-</button>
            &nbsp;
            {/* <b>{count}</b> */}
            <b>{store.getState()}</b>
            &nbsp;
            <button onClick={increment}>+</button>
        </fieldset>
    ) 
}
export default Counter 